<!--
 * @Description:
 * @version:
 * @Author: 娃哈哈
 * @Date: 2024-12-18 21:09:43
-->
<template>
    <div class="box">
        <bgBox>
            <sectionTitle title="高发区域" />
            <div style="height: 30px;"></div>
            <div class="content">
                <leftTable1 showLength="5" style="width: 50%;" @cellClick="cellClick" />
                <img class="line-img" src="@/assets/img/line.png" alt="">
                <leftTable1 :minLength="5" :maxLength="7" style="width: 50%;" @cellClick="cellClick" />
            </div>
        </bgBox>
    </div>
</template>

<script setup lang="ts">
import bgBox from '../components/bgBox.vue'
import sectionTitle from '../components/sectionTitle.vue'
import leftTable1 from '../components/leftTable1.vue'
import { PopupType } from '../../index.d'
import { inject } from 'vue'
const showPopup = inject('showPopup') as (data: PopupType) => void;
/**
 * 获取列表点击事件
 */
const cellClick = (item:{[key:string]: any}) => {
    console.log('item',item);
    showPopup({ type: 10, show: true,searchInfo: item , container: true})
}
</script>

<style scoped lang="less">
.box {
    height: 200px;
}
.content {
    padding-left: 40px;
    height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    .line-img{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        height: 140px;
    }
}
</style>